<template>
  <div class="box">
    <head-vue></head-vue>
    <section id="scro">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <banner-vue></banner-vue>
        <nav-bar-vue></nav-bar-vue>
        <main>
          <sec-kill-vue></sec-kill-vue>
          <goods-list-vue></goods-list-vue>
        </main>
      </van-pull-refresh>
    </section>
    <footer-vue></footer-vue>
    <div class="back-top" v-show="flag_scroll">
      <van-icon name="back-top" @click="backTop" />
    </div>
  </div>
</template>

<script>
import HeadVue from "@/components/HeadCom.vue";
import BannerVue from "@/components/BannerCom.vue";
import NavBarVue from "@/components/NavBar.vue";
import SecKillVue from "@/components/SecondKill.vue";
import GoodsListVue from "@/components/GoodsList.vue";
import FooterVue from "@/components/FooterCom.vue";
import { Toast } from "vant";

export default {
  components: {
    HeadVue,
    BannerVue,
    NavBarVue,
    SecKillVue,
    GoodsListVue,
    FooterVue,
  },
  data() {
    return {
      isLoading: false,
      flag_scroll: false,
    };
  },
  mounted() {
    // 监听滚动事件
    document
      .querySelectorAll("#scro")[0]
      .addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    backTop() {
      // 返回顶部
      document.querySelectorAll("#scro")[0].scrollTop = 0;
    },
    handleScroll() {
      // 判断返回顶部显示的滚动距离
      if (document.querySelectorAll("#scro")[0]) {
        
        let scrollTop = document.querySelectorAll("#scro")[0].scrollTop;
        if (scrollTop > 380) {
          this.flag_scroll = true;
        } else {
          this.flag_scroll = false;
        }
      }
    },
  },
};
</script>

<style scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  overflow: auto;
  background: #ededed;
}
main {
  padding: 10px 7px 0;
}
.back-top {
  position: fixed;
  background: white;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  right: 0.625rem;
  bottom: 3.6rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-icon {
  font-size: 1.75rem;
}
</style>